<template>
    <el-form-item label="类型" prop="valueType">
        <el-select v-model="properties.valueType" placeholder="下拉值获取类型" style="width: 100%">
            <el-option label="自定义" value="CUSTOM" />
            <el-option label="表单外部接口" value="FORM_INTERFACE" />
            <el-option label="三方服务" value="THIRE_EXEC" />
            <el-option label="接口服务" value="API_SERVICE" />
        </el-select>
    </el-form-item>

    <el-form-item label="自定义数组JSON" prop="customValue" v-if="properties.valueType === 'CUSTOM'">
        <el-input v-model="properties.customValue" style="width: 100%" placeholder="自定义数组JSON" />
    </el-form-item>

    <el-form-item label="表单外部接口" prop="formInterfaceCode" v-if="properties.valueType === 'FORM_INTERFACE'">
        <el-cascader v-model="properties.formInterfaceCode" :props="templateProps" style="width: 100%" @change="formInterfaceChange($event)"/>
    </el-form-item>

    <el-form-item label="参数配置" v-if="properties.valueType === 'FORM_INTERFACE'">
        <el-table :data="properties.realFormConditionList" :border="true"
                  :stripe="true"
                  :show-overflow-tooltip="true"
                  :max-height="200"
                  style="width: 100%;">
            <el-table-column prop="labelName" label="字段名称"></el-table-column>
            <el-table-column prop="value" label="字段值">
                <template #default="scope">
                    <el-input v-model="scope.row.showInfo" @click="formInterfaceValueClick(scope)"/>
                </template>
            </el-table-column>
        </el-table>
    </el-form-item>

    <el-dialog v-model="formInterfaceDialogFlag" title="参数配置" width="30%">
        <el-form>
            <el-form-item label="类型" label-width="20%">
                <el-radio-group v-model="tempFormInterfaceInfo.selectType">
                    <el-radio label="custom">自定义</el-radio>
                    <el-radio label="formParam">表单变量</el-radio>
                </el-radio-group>
            </el-form-item>
            <br />
            <el-form-item v-if="tempFormInterfaceInfo.selectType === 'custom'" label="值" label-width="20%">
                <el-input v-model="tempFormInterfaceInfo.customContent" />
            </el-form-item>
            <el-form-item v-if="tempFormInterfaceInfo.selectType === 'formParam'" label="内置变量" label-width="20%">
                <el-select v-model="tempFormInterfaceInfo.formParam" placeholder="内置变量" style="width: 100%">
                    <el-option v-for="item in formBuildList" :key="item.code" :label="item.labelName" :value="item.code" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="formInterfaceDialogFlag = false">取消</el-button>
                <el-button type="primary" @click="submitFormInterfaceDialog()">确认</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup name="YwuFormValueCommon">
import {computed, defineProps, ref} from "vue";
import {
    queryFormInterfacePageList,
    queryFormPageList,
    queryVersionInfo,
    queryVersionList
} from "@/request/flow/index.js";

let props = defineProps(['properties', 'formBuildList']);

let properties = computed(() => {return props['properties']});
let formBuildList = computed(() => {return props['formBuildList']});

let formInterfaceDialogFlag = ref(false)
let tempFormInterfaceInfo = ref({})

let templateProps = ref({
    lazy: true,
    async lazyLoad(node, resolve) {
        let nodes = [];
        const {level, value} = node
        if (level === 0) {
            // 查询应用列表
            let param = {
                pageInfo: {
                    pageIndex: 1,
                    pageSize: 1000
                }
            }
            await queryFormPageList(param).then(res => {
                let dataList = res.data.dataList;
                for (let i = 0; i < dataList.length; i++) {
                    nodes.push({
                        value: dataList[i].id,
                        label: dataList[i].nameCn,
                        leaf: false
                    })
                }
            })
        } else if (level === 1) {
            // 查询表单版本列表
            let param = {
                id: value
            }
            await queryVersionList(param).then(res => {
                let dataList = res.data
                dataList.forEach(item => {
                    nodes.push({
                        value: item.version,
                        label: "版本" + item.version,
                        leaf: false
                    })
                })
            })
        } else {
            let param = {
                formId: node.pathValues[0],
                formVersion: node.pathValues[1],
                pageInfo: {
                    pageIndex: 1,
                    pageSize: 1000
                }
            }
            await queryFormInterfacePageList(param).then(res => {
                let dataList = res.data.dataList;
                for (let i = 0; i < dataList.length; i++) {
                    nodes.push({
                        value: dataList[i].code,
                        label: dataList[i].nameCn,
                        leaf: true
                    })
                }
            })
        }
        resolve(nodes)
    }
})

function formInterfaceChange(event) {
    // 根据表单ID和表单版本查询表单详情
    let param = {
        resourceId: event[0],
        version: event[1]
    }
    queryVersionInfo(param).then(res => {
        let data = res.data
        let formJson = data["formJson"]
        let formJsonInfo = JSON.parse(formJson);
        let componentJsonInfo = formJsonInfo.componentJson
        // 查询表单外部接口
        let interfaceParam = {
            code: event[2],
            pageInfo: {
                pageIndex: 1,
                pageSize: 1000
            }
        }
        queryFormInterfacePageList(interfaceParam).then(interfaceRes => {
            let dataList = interfaceRes.data.dataList;
            if (dataList && dataList.length > 0) {
                let interfaceItem = dataList[0];
                let formConditionJson = interfaceItem.formConditionJson
                let formConditionList = JSON.parse(formConditionJson)
                properties.value.realFormConditionList = [];
                for (let i = 0; i < componentJsonInfo.length; i++) {
                    for (let j = 0; j < formConditionList.length; j++) {
                        if (formConditionList[j] === componentJsonInfo[i].code) {
                            properties.value.realFormConditionList.push(componentJsonInfo[i])
                            break;
                        }
                    }
                }
            }
        })
    })
}

function formInterfaceValueClick(scope) {
    tempFormInterfaceInfo.value = scope.row;
    formInterfaceDialogFlag.value = true;
}

function submitFormInterfaceDialog() {
    if (tempFormInterfaceInfo.value.selectType === 'custom') {
        tempFormInterfaceInfo.value.showInfo = "自定义." + tempFormInterfaceInfo.value.customContent;
    } else if (tempFormInterfaceInfo.value.selectType === 'formParam') {
        tempFormInterfaceInfo.value.showInfo = "表单变量." + tempFormInterfaceInfo.value.formParam;
    }
    formInterfaceDialogFlag.value = false;
}
</script>

<style scoped lang="less">

</style>